.spectrum-Underlay {
  visibility: hidden;

  opacity: 0;

  transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
              opacity var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
              visibility 0ms linear var(--spectrum-global-animation-duration-100, 130ms);

  pointer-events: none;
}

.spectrum-Underlay.is-open {
  visibility: visible;

  opacity: 1;

  transition-delay: 0ms;

  pointer-events: auto;
}

.spectrum-Underlay {

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;

  overflow: hidden;
  transition: opacity var(--spectrum-dialog-background-exit-animation-duration, var(--spectrum-global-animation-duration-300)) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)),
              visibility 0ms linear calc(var(--spectrum-dialog-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)) + var(--spectrum-dialog-background-exit-animation-duration, var(--spectrum-global-animation-duration-300)));
}

.spectrum-Underlay.is-open {
  transition: opacity var(--spectrum-dialog-background-entry-animation-duration, var(--spectrum-global-animation-duration-600)) cubic-bezier(0, 0, 0.40, 1) 0ms;
}

.spectrum-Underlay {
  background: var(--spectrum-dialog-underlay-background-color, var(--spectrum-alias-background-color-modal-overlay));
}
